<template>
  <div class="splashScreen">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :inline="true" label-width="150px" class="demo-ruleForm">
      <el-form-item label="执行状态：">
        <el-select v-model="ruleForm.executionStatus">
          <el-option v-for="item in executes" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间：">
        <el-date-picker v-model="time" type="datetimerange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="addsplash('add')">新建</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" v-loading="loading" border stripe>
      <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
      <el-table-column prop="appName" label="APP" align="center"></el-table-column>
      <el-table-column prop="userName" label="创建人" align="center"></el-table-column>
      <el-table-column prop="executionStatus" label="执行状态" align="center" :formatter="initStatus"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" :formatter="initTime"></el-table-column>
      <el-table-column prop="updateTime" label="编辑时间" align="center" :formatter="initTime"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" :disabled="scope.row.executionStatus==0" @click="addsplash('edit',scope.row)">编辑</el-button>
          <el-button type="text" size="small" v-if="scope.row.executionStatus==1" @click="isCarryOut(scope.row,1)">启用</el-button>
          <el-button type="text" size="small" v-else @click="isCarryOut(scope.row,2)">弃用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="ruleForm.pageNum" :page-sizes="[10, 20, 40, 50]" :page-size="ruleForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top:30px;">
    </el-pagination>
  </div>
</template>
<script>
import utils from "../../common/utils"
import api from '@/api/apiPath'
export default {
  name:'splashscreen',
  title:'闪屏广告',
  data() {
    return {
      time: "",
      executes: [
        { label: "全部", value: "" },
        { label: "执行中", value: "0" },
        { label: "未执行", value: "1" }
      ],
      tableData: [],
      loading: false,
      total: 0,
      ruleForm: {
        executionStatus: "",
        beginTime: "",
        endTime: "",
        pageNum: 1,
        pageSize: 10
      },
      rules: {

      }
    }
  },
  watch: {
    time(val) {
      if (val) {
        this.ruleForm.beginTime = this.getTimeString(this.time[0]);
        this.ruleForm.endTime = this.getTimeString(this.time[1]);
      } else {
        this.ruleForm.beginTime = ""
        this.ruleForm.endTime = ""
      }
    }
  },
  methods: {
    warn(msg) {
      this.$alert(msg, '提示', {
        type: 'error',
        confirmButtonText: '确定',
        callback: action => {}
      });
    },
    isCarryOut(data, type) {
      let params = {};
      params.id = data.id;
      params.appType = data.appType;
      if (type == 1) {
        params.executionStatus = 0
        params.enableStatus = 0
      } else {
        params.executionStatus = 1
        params.enableStatus = 1
      }
      this.$confirm(`${type==1?'确定启用广告':'确定弃用广告'}`, "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post(api.isCarryOutScreen, params).then((res) => {
          if (res.data.code == 200 && res.data.data) {
            this.warn(res.data.data)
          } else {
            this.$alert("操作成功", '提示', {
              type: 'success',
              confirmButtonText: '确定',
              callback: action => {
                this.loadData();
              }
            });
          }
        })
      }).catch(() => {})
    },
    query() {
      this.ruleForm.pageNum = 1;
      this.loadData();
    },
    loadData() {
      this.axios.post(api.splashScreenList, this.ruleForm).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        }
      }).catch((error) => {
        console.log(error);
      })
    },
    addsplash(type, data) {
      if (type == "add") {
        this.$router.push({
          path: "/addoredit",
          query: {
            type: type
          }
        })
      } else {
        this.$router.push({
          path: "/addoredit",
          query: {
            type: type,
            appName: data.appName,
            appType: data.appType,
            enableStatus: data.enableStatus,
            executionStatus: data.executionStatus,
            id: data.id,
            linkAddress: data.linkAddress,
            appImg:data.appImg
          }
        })
      }
    },
    initStatus(row, column, cellValue, index) {
      if (cellValue == 0) { return "执行中" }
      if (cellValue == 1) { return "未执行" }
    },
    initTime(row, column, cellValue, index) {
      return this.getTimeString(cellValue)
    },
    handleSizeChange(val) {
      this.ruleForm.pageSize = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.ruleForm.pageNum = val;
      this.loadData();
    },
    getTimeString(timestamp) {
      if (timestamp) {
        const time = new Date(timestamp)
        let dateStr = ''
        const year = time.getFullYear()
        const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
        const day = String(time.getDate()).length === 1 ? '0' + time.getDate() : time.getDate()
        dateStr = year + '-' + month + '-' + day
        let timeStr = ''
        const hours = time.getHours()
        const hh = String(hours).length === 1 ? '0' + hours : hours
        const minutes = time.getMinutes()
        const mm = String(minutes).length === 1 ? '0' + minutes : minutes
        const seconds = time.getSeconds()
        const ss = String(seconds).length === 1 ? '0' + seconds : seconds
        timeStr = `${hh}:${mm}:${ss}`
        // timeStr = `${hh}:${mm}`
        return dateStr + ' ' + timeStr
        // return dateStr
      } else {
        return ''
      }
    },
  },
  mounted() {
    this.loadData();
  },
  activated(){
    this.query();
  }
}

</script>
<style lang="css">
</style>
